<template>
  <div class="styleConfig">
    <DividerTile title="属性配置" :isShow.sync="isShow"></DividerTile>
    <el-form size="small" label-width="90px" v-show="isShow">
      <el-form-item label="日期颜色">
        <el-color-picker v-model="activeFormData.style.color" @change="valueChange($event, 'style.color')"></el-color-picker>
      </el-form-item>
      <el-form-item label="可选日期">
        <el-date-picker v-model="activeFormData.rangeDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" class="width100"  @change="valueChange($event, 'position')">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="弹出位置">
        <el-select v-model="activeFormData.position" class="width100">
          <el-option v-for="item in option" :key="item.value" :label="item.lable" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="最大范围">
        <el-input-number v-model="activeFormData.maxRange" :min="1" @change="valueChange($event, 'maxRange')"></el-input-number>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const option = [
  { label: 'bottom', value: 'bottom' },
  { label: 'top', value: 'top' },
  { label: 'left', value: 'left' },
  { label: 'right', value: 'right' }
]
import { mapMutations, mapState } from 'vuex'
import DividerTile from '../../../dividerTile'
export default {
  name: 'styleConfig',
  components: {
    DividerTile
  },
  data() {
    return {
      option,
      isShow: true
    }
  },
  computed: {
    ...mapState('pageData', ['activeFormData'])
  },
  methods: {
    ...mapMutations('pageData', ['SETPROP']),
    valueChange(value, key) {
      this.SETPROP({
        value,
        key
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.styleConfig {
  padding-right: 10px;
}
</style>